<template>
    <div class="container">
        <div class="card" v-for="user in users" :key="user.id">
            <img :src="user.avatar_url">
            <span>{{user.login}}</span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'List',
    data() {
        return {
            users: []
        }
    },
    methods:{
        getUsers(users) {
            this.users = users
        }
    },
    mounted() {
        this.$bus.$on('getUsers', this.getUsers)
    },
    beforeDestroy() {
        this.$bus.$off('getUsers')
    }
}
</script>

<style scoped>
.container {
    background-color: #F8F8FF;
    padding: 2px;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
}
.card {
    width: 200px;
    height: 220px;
    padding: 2px;
    margin: 2px;
    border: 1px solid rgba(220,220,220, 1);
}
.card img {
    width: 100%;
}
div span {
    display: block;
    text-align: center;
}
</style>